<script setup lang="ts">
import { inject, ref, reactive } from 'vue'
import TransverseIcon from '@/components/TransverseIcon.vue'
import TwoItemX from '@/components/TwoItemX.vue'
import TwoItemY from '@/components/TwoItemY.vue'
import PointItem from '@/components/PointItem.vue'
import FlameCoalDialog from './FlameCoalDialog.vue'
import { type } from 'os'

// 气体数据
const gasData = reactive({
  name: '4号出口'
})

// refs
const flameCoalDialog = ref()

// 定义方法
const showFlameCoalDialog = (deviceId:string) => {
  console.log('展示明火煤弹框--------->', deviceId)
  flameCoalDialog.value.showFlameCoal(deviceId)
}

const isShowIcom = inject('isShowIcom') as (num:number) => {}
</script>

<template>
  <div class="body-main-box">
    <div class="first-box">
      <div class="left-box">
        <div>2号出口</div>
      </div>
      <div class="middle-box">
        <div class="middle-left-box">
          <div class="flame-coal-box">
            明火煤
            <div @click="showFlameCoalDialog('1#A皮带')" />
            <FlameCoalDialog ref="flameCoalDialog" />
          </div>
          <div class="flame-coal-box">
            明火煤
            <div @click="showFlameCoalDialog('1#B皮带')" />
            <FlameCoalDialog ref="flameCoalDialog" />
          </div>
        </div>
        <div class="middle-right-box">
          卸煤沟
        </div>
      </div>
      <div class="right-box">
        <div>
          3号出口
        </div>
      </div>
    </div>
    <div class="second-box">
      <div class="second-left-top-box">
        <div class="second-left-box">
          <PointItem />
        </div>
        <div class="second-top-box">
          <div class="first-son">
            <TwoItemX :data-id="2" />
          </div>
          <div class="second-son">
            <TwoItemX :data-id="3" />
          </div>
        </div>
        <div class="second-right-box">
          <div>
            <TwoItemY :data-id="4" />
          </div>
        </div>
        <div>
          <div class="second-title">
            4号出口
          </div>
        </div>
      </div>
      <div class="second-bottom-box">
        <TransverseIcon :position="0" />
      </div>
    </div>
    <div class="third-box">
      <div class="empty-box" />
      <TransverseIcon :position="1" />
      <div class="third-left-top-box">
        <div class="third-left-box">
          <TwoItemY :data-id="9" />
        </div>
        <div class="third-top-box">
          <div class="first-son">
            <TwoItemX :data-id="8" />
          </div>
          <div class="middle-son">
            <TwoItemX :data-id="7" />
          </div>
          <div class="second-son">
            <TwoItemX :data-id="6" />
          </div>
        </div>
        <div class="third-right-box">
          <TwoItemY :data-id="5" />
        </div>
        <div>
          <div class="third-title">
            5号出口
          </div>
        </div>
      </div>
      <div class="title78-box">
        <div class="title8">
          8号出口
        </div>
        <div class="title1">
          7号出口
        </div>
        <div class="title7">
          6号出口
        </div>
      </div>
    </div>
    <div class="illustration-box">
      <div @click="isShowIcom(0)">
        <div class="iconfont icon-fenchen" />
        <div class="icon-name">
          粉尘
        </div>
      </div>
      <div @click="isShowIcom(1)">
        <div class="iconfont icon-yangan" />
        <div class="icon-name">
          烟感
        </div>
      </div>
      <div @click="isShowIcom(2)">
        <div class="iconfont icon-jiawan" />
        <div class="icon-name">
          甲烷
        </div>
      </div>
      <div @click="isShowIcom(3)">
        <div class="iconfont icon-hongwaichuanganqi" />
        <div class="icon-name">
          红外
        </div>
      </div>
      <div @click="isShowIcom(4)">
        <div class="iconfont icon-yiyanghuatan" />
        <div class="icon-name">
          一氧化碳
        </div>
      </div>
      <div @click="isShowIcom(5)">
        <div class="iconfont icon-yangqi" />
        <div class="icon-name">
          氧气
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.body-main-box {
  /* width: 1640px;
  height: 922px;
  margin-top: 10px;
  padding-left: 2px; */
  width: 85.42vw;
  height: 91.85vh;
  margin-top: 1vh;
  padding-left: 0.1vw;
  border: 1px solid rgba($color: #000, $alpha: 0%);
  .first-box {
    display: flex;

    /* width: 1640px;
    height: 135px;
    margin-top: 68px; */
    width: 85.42vw;
    height: 13.8vh;
    margin-top: 7.1vh;

    /* background: rgb(215 232 255 / 40%); */

    /* border: 2px solid rgb(10 48 97 / 30%); */
    border-radius: 0;
    opacity: 1;
    .left-box {
      /* width: 307px;
      height: 120px; */
      width: 15.99vw;
      height: 11.11vh;
      > div {
        /* margin-top: 109px;
        margin-left: 150px; */
        width: 4vw;
        height: 2vh;
        margin-top: 10vh;
        margin-left: 7.81vw;
        color: #86909c;
        font-weight: 600;
        font-size: 14px;
        font-family: PingFang,sans-serif;
        line-height: 2vh;
        background-clip: text;

        /* border: 1px solid red; */
      }
    }
    .middle-box {
      display: flex;

      /* width: 1000px;
      height: 120px; */
      width: 52.08vw;
      height: 11.11vh;
      .middle-left-box {
        /* width: 220px;
        height: 120px; */
        width: 11.46vw;
        height: 11.11vh;
        > div {
          display: flex;

          /* width: 220px;
          height: 60px;
          margin-left: 80px; */
          width: 11.46vw;
          height: 5.9vh;
          margin-left: 4.17vw;
          color: #86909c;
          font-weight: 600;
          font-size: 14px;
          font-family: PingFang,sans-serif;
          line-height: 5.9vh;
          background-clip: text;

          /* border: 1px solid red; */
          > div {
            /* width: 72px;
            height: 38px;
            margin-top: 13px;
            margin-left: 13px; */
            width: 4.75vw;
            height: 100%;

            /* margin-top: 1.2vh; */
            margin-left: 0.68vw;
            background-image: url("../assets/bckImg/flameCoal.png");
            background-repeat: no-repeat;
            background-position: 0.6vw 0;
            background-size: 100% 100%;

            /* border: 1px solid red; */
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
      .middle-right-box {
        /* width: 780px;
        height: 120px;
        margin-top: 15px;
        padding-left: 230px; */
        width: 40.63vw;
        height: 11.11vh;
        margin-top: 1.39vh;
        padding-left: 11.98vw;
        color: #4e5969;
        font-weight: 400;
        font-size: 18px;
        font-family: HXBNS,sans-serif;
        line-height: 11.11vh;
        letter-spacing: 3px;
        background-clip: text;

        /* border: 1px solid red; */
      }
    }
    .right-box {
      /* width: 296px;
      height: 120px; */
      width: 15.42vw;
      height: 11.11vh;
      > div {
        /* width: 51px;
        height: 20px;
        margin-top: 109px;
        margin-left: 105px; */
        width: 4vw;
        height: 2vh;
        margin-top: 10vh;
        margin-left: 5.47vw;
        color: #86909c;
        font-weight: 600;
        font-size: 14px;
        font-family: PingFang,sans-serif;
        line-height: 2vh;
        background-clip: text;

        /* border: 1px solid red; */
      }
    }
  }
  .second-box {
    /* width: 1640px;
    height: 313px;
    margin-left: 21px; */
    width: 85vw;
    height: 34vh;
    margin-left: 1.39vw;
    background-image: url("../assets/bckImg/bgImg.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 81.86vw 28vh;

    /* border: 1px solid red; */
    .second-left-top-box {
      display: flex;

      /* height: 130px; */
      height: 13.5vh;
      .second-left-box,
      .second-right-box {
        /* width: 70px; */
        width: 3.75vw;

        /* height: 130px; */
        height: 13.5vh;

        /* border: 1px solid red; */
      }
      .second-right-box {
        /* width: 55px;
        margin-left: 15px; */
        width: 2.86vw;
        margin-left: 0.78vw;
      }
      .second-title {
        /* width: 14px;
        height: 80px;
        margin-top: 35px;
        margin-left: 15px; */
        width: 0.73vw;
        height: 7.41vh;
        margin-top: 3.24vh;
        margin-left: 0.78vw;
        color: #86909c;
        font-weight: 600;
        font-size: 14px;
        font-family: PingFang,sans-serif;
        line-height: 2vh;
        text-align: center;
        background-clip: text;
      }
      .second-top-box {
        display: flex;

        /* width: 1436px;
        height: 130px; */
        width: 74.79vw;
        height: 1.2vh;

        /* border: 1px solid red; */
        .first-son {
          margin-left: 0;
        }
        .second-son {
          /* margin-left: 1148px; */
          margin-left: 59.4vw;
        }
      }
    }
    .second-bottom-box {
      /* width: 1576px;
      height: 70px; */
      width: 80.82vw;
      height: 6.48vh;

      /* border: 1px solid red; */
    }
    .machine-box {
      /* width: 156px;
      height: 70px;
      margin-top: 70px;
      margin-left: 760px; */
      width: 8.13vw;
      height: 6.48vh;
      margin-top: 6.48vh;
      margin-left: 39.58vw;
    }
  }
  .third-box {
    /* width: 1630px;
    height: 383px;
    margin-top: 10px;
    margin-left: 21px; */
    width: 84.9vw;
    height: 30.46vh;
    margin-top: 1vh;
    margin-left: 1.19vw;
    background-image: url("../assets/bckImg/bgImg.png");
    background-repeat: no-repeat;
    background-position: 0 2vh;
    background-size: 81.88vw 28vh;

    /* border: 1px solid red; */
    .empty-box {
      height: 8.9vh;
    }
    .third-left-top-box {
      display: flex;

      /* height: 150px; */
      height: 15.5vh;
      .third-left-box,
      .third-right-box {
        /* width: 70px;
        height: 130px; */
        width: 3.65vw;
        height: 12.4vh;

        /* border: 1px solid red; */
      }
      .third-right-box {
        /* width: 55px;
        margin-left: 15px; */
        width: 2.86vw;
        margin-left: 0.78vw;
      }
      .third-title {
        /* width: 14px;
        height: 80px;
        margin-top: 35px;
        margin-left: 15px; */
        width: 0.73vw;
        height: 7.41vh;
        margin-top: 2.5vh;
        margin-left: 0.88vw;
        color: #86909c;
        font-weight: 600;
        font-size: 14px;
        font-family: PingFang,sans-serif;
        line-height: 20px;
        text-align: center;
        background-clip: text;
      }
      .third-top-box {
        display: flex;

        /* width: 1436px;
        height: 145px; */
        width: 74.79vw;
        height: 13.43vh;

        /* border: 1px solid red; */
        .first-son {
          /* margin-top: 85px; */
          margin-top: 6.5vh;
        }
        .middle-son {
          margin-top: 6.5vh;
          margin-left: 26.7vw;
        }
        .second-son {
          margin-top: 6.5vh;

          /* margin-left: 1142px; */
          margin-left: 26.48vw;
        }
      }
    }
    .title78-box {
      display: flex;

      /* width: 1640px;
      height: 50px; */
      width: 85.42vw;
      height: 4.63vh;

      /* border: 1px solid green; */
      > div {
        /* width: 51px;
        height: 20px;
        margin-top: 18px; */
        width: 2.66vw;
        height: 2vh;
        color: #86909c;
        font-weight: 600;
        font-size: 14px;
        font-family: PingFang,sans-serif;
        line-height: 2vh;
        background-clip: text;
      }
      .title7 {
        width: 150px;

        /* margin-left: 1210px; */
        margin-left: 25.7vw;

        /* border: 1px solid red; */
      }
      .title1 {
        width: 150px;
        margin-left: 25vw;
      }
      .title8 {
        width: 150px;

        /* margin-left: 135px; */
        margin-left: 6.5vw;

        /* border: 1px solid red; */
      }
    }
  }
  .illustration-box {
    position: absolute;

    /* width: 300px;
    height: 76px;
    margin-left: 1310px; */
    top: 4vh;
    left: 82vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 15.79vw;
    height: 7.04vh;

    /* margin-left: 68.23vw; */
    background: linear-gradient(
      180deg,
      rgb(255 255 255 / 70%) 0%,
      rgb(255 255 255 / 30%) 100%
    );
    border: 1px solid #fff;
    border-radius: 6px;
    box-shadow: 0 2px 10px 0 rgb(166 184 208 / 20%);
    opacity: 1;
    > div {
      display: flex;
      width: 85px;
      height: 20px;
      margin-top: 8px;
      margin-left: 10px;
      &:hover {
        cursor: pointer;
      }
      .iconfont {
        width: 20px;
        height: 20px;
        background: linear-gradient(180deg, #54aafe 0%, #4482ed 100%);
        border-radius: 0;
        box-shadow: 0 2px 4px 0 #bbd2ff;
        opacity: 1;
      }
      .icon-name {
        height: 20px;
        margin-left: 8px;
        color: #86909c;
        font-weight: 600;
        font-size: 14px;
        font-family: PingFang,sans-serif;
        line-height: 16px;
        background-clip: text;
      }
      .icon-hongwai2 {
        transform: rotate(180deg);
      }
    }
  }
}

</style>
